<template>
  <div>
    <BasicTable @register="registerTable">
      <template #tradeStatus="{ record }">
        <div class="pay-trade-tag-box">
          <Tag color="blue" class="pay-trade-plat pay-trade-item" v-if="record.diffType !== '1'"> 渠道: {{ record.channelStatusText }} </Tag>
          <Tag color="purple" class="pay-trade-channle pay-trade-item" v-if="record.diffType !== '2'"> 平台: {{ record.orderStatusText }} </Tag>
        </div>
      </template>
      <template #tradeAmount="{ record }">
        <div class="pay-trade-tag-box">
          <div v-if="record.diffType !== '1'">
            <Tag color="blue" class="pay-trade-plat pay-trade-item">渠道</Tag>
            <span style="margin-left: 5px; color: red">￥{{ record.channelAmount }}</span>
          </div>
          <div v-if="record.diffType !== '2'">
            <Tag color="purple" class="pay-trade-channle pay-trade-item">平台</Tag>
            <span style="margin-left: 5px; color: red">￥{{ record.orderAmount }}</span>
          </div>
        </div>
      </template>
    </BasicTable>
    <FormDetail @register="registerFormDetail" />
  </div>
</template>
<script lang="ts" name="CheckDiff" setup>
  import { ref, onMounted, watch, PropType } from "vue"
  import { Auth } from "/@/enums/authEnum"
  import { Row, Col, Tag } from "ant-design-vue"
  import { BasicTable, BasicColumn, useTable } from "/@/components/Table"
  import { useDrawer } from "/@/components/Drawer"
  import { useI18n } from "/@/hooks/web/useI18n"
  import { columns, searchFormSchema } from "./data"
  import { pageCheckDiff, ignoreCheckDiff } from "/@/api/pay"
  import { useMessage } from "/@/hooks/web/useMessage"
  import { useRoute } from "vue-router"
  import FormDetail from "./Detail.vue"

  const route = useRoute()
  const { t } = useI18n("")
  const [registerFormDetail, { openDrawer: openFormDetail }] = useDrawer()

  const props = defineProps({
    params: { type: Object as PropType<any>, required: false },
  })

  const actionColumn: BasicColumn = {
    width: 130,
    title: "操作",
    dataIndex: "action",
    fixed: "right",
    slot: "tableActions",
    actions: (record: Recordable) => [
      {
        label: "忽略",
        color: "error",
        ifShow: record.handleStatus === "1" || record.handleStatus === "2",
        auth: Auth.deleteBillCheckDiff,
        popConfirm: {
          title: "是否确认忽略",
          confirm: handleIgnore.bind(null, record),
        },
      },
      {
        label: "详情",
        onClick: handleDetail.bind(null, record),
      },
    ],
    dropDownActions: (record: Recordable) => [],
  }

  const [registerTable, { reload, getForm, setProps }] = useTable({
    title: "差异账单",
    api: pageCheckDiff,
    columns: columns,
    bordered: false,
    beforeFetch: (params) => {
      return params
    },
    formConfig: {
      baseColProps: { lg: 6, md: 12 },
      labelWidth: 90,
      schemas: searchFormSchema,
      showResetButton: false,
      fieldMapToTime: [["billDate", ["beginDate", "endDate"], "YYYY-MM-DD"]],
    },
    immediate: false,
    showTableSetting: true,
    showIndexColumn: false,
    useSearchForm: true,
    pagination: true,
    canResize: true,
    rowKey: "id",
    actionColumn,
  })

  const loadList = async (batchNo) => {
    const form = getForm()
    if (!form) {
      return
    }
    console.log(batchNo)
    await form.updateSchema({
      field: "batchNo",
      defaultValue: batchNo,
    })
    reload()
  }

  const handleIgnore = async (record) => {
    await ignoreCheckDiff({ id: record.id })
    reload()
  }
  const handleDetail = (record) => openFormDetail(true, { record })

  watch(
    () => props.params,
    async () => {
      if (!props.params) {
        return
      }
      const { batchNo } = props.params
      if (batchNo) {
        await loadList(batchNo)
        await setProps({ canResize: false })
      }
    },
    {
      immediate: true,
      deep: true,
    }
  )

  onMounted(async () => {
    const { batchNo } = route.query
    if (route.path !== "/pay/checkDiff") {
      return
    }
    loadList(batchNo)
  })
</script>

<style lang="less">
  .pay-trade-tag-box {
    display: flex;
    flex-direction: column;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
  }
  .pay-trade-item {
    // height: 60px
    margin: 2px;
  }
  .pay-trade-plat {
  }

  .pay-trade-channle {
  }
</style>
